<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>语义化布局</title>
    <link rel="stylesheet" href="../css/main.css">
    <!--
        <script>
            var elements = ("article,header,nav,aside,section,footer,hgroup,"+
                            "figure,figcaption,mark,time,address,video").split(',');
            for(var i = 0; i < elements.length; i++){
                document.createElement(elements[i]);
            }
        </script>
    -->

    <!--[if lt IE 9]>
        <script src="../src/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
    <div id="wrapper">
        <header class="my_header">
            <div class="logo">LOGO</div>
            <nav>
                <ul>
                    <li>导航1<span>&lt;</span></li>
                    <li>导航2</li>
                    <li>导航3<span>&lt;</span></li>
                    <li>导航4<span>&lt;</span></li>
                    <li>导航5</li>
                    <li>导航6</li>
                </ul>
            </nav>
            <div class="right_panel">功能</div>
        </header>
        <div class="main">
            <section class="video_bg">
                <video src="../resource/video1.webm" autoplay="autoplay" loop="loop"></video>
                <div class="video_text">
                    <h1>HTML5颠覆互联网</h1>
                    <p>上天入地，无所不能，我相信H5会发展的更好！</p>
                </div>
            </section>
            <section class="article_container">
                <article>
                    <header>
                        <hgroup>
                            <h2>文章主标题</h2>
                            <h3>文章副标题</h3>
                        </hgroup>
                        <div class="article_info">
                            <time>2016-01-01 18:18:18</time>
                            <address>作者：xcy</address>
                        </div>
                    </header>
                    <p>
                        文章<mark>内容</mark>.....<br>
                        文章内容AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
                        文章内容bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
                    </p>
                </article>
            </section>
            <aside>
                <h2>侧边栏</h2>
                <ul>
                    <li>分类1</li>
                    <li>分类2</li>
                    <li>分类3</li>
                    <li>分类4</li>
                    <li>分类5</li>
                </ul>
            </aside>
        </div>
        <footer>
            这里是底部信息
        </footer>
    </div>
</body>
</html>
